{%- assign section_identifier = '#shopify-section-' | append: section.id -%}
{%- style -%}
  {{ section_identifier }} .sec_heading {
    color: {{ section.settings.text_color_title }};
    font-size: 80px;
    font-weight: 700;
    line-height: 90px;
  }
  @media only screen and (max-width: 1024px) {
    {{ section_identifier }} .brand-gallary-wrap .title {
      max-width: 100%;
      width: 100%;
    }
  }
  @media  (min-width: 768px) and (max-width: 821px){
    {{ section_identifier }} .brand-gallary-wrap .title {
      max-width: 100%;
      width: 100%;
    }
  }
  @media only screen and (max-width: 430px) {
    {{ section_identifier }} .sec_heading {
      font-size: 48px;
      line-height: 48px;
    }
  }
{%- endstyle -%}
<div class="brand-gallary-wrap w-100 padding-x overflow-hidden">
  <div class="content">
    <div class="position-relative h-100">
      {% for block in section.blocks %}
        {% case block.type %}
          {% when 'image1' %}
            {% if block.settings.desktop_image %}
              <div
                class="position-absolute ratio desktop_image1 d-none d-md-block as-parallax-list"
                data-start="2.6"
                data-end=".4"
                style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.desktop_image.aspect_ratio | times: 100 }}%;"
              >
                {{
                  block.settings.desktop_image
                  | image_url: width: block.settings.desktop_image.width
                  | image_tag: loading: 'lazy', class: 'rounded-2'
                }}
              </div>
            {% endif %}
            {% if block.settings.mobile_image %}
              <div
                class="position-absolute ratio mobile_image1 d-block d-md-none as-parallax-list"
                data-start=".8"
                data-end=".2"
                style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.mobile_image.aspect_ratio | times: 100 }}%;"
              >
                {{
                  block.settings.mobile_image
                  | image_url: width: block.settings.mobile_image.width
                  | image_tag: loading: 'lazy', class: 'rounded-2'
                }}
              </div>
            {% endif %}
          {% when 'image2' %}
            {% if block.settings.desktop_image %}
              <div
                class="position-absolute ratio desktop_image2 d-none d-md-block as-parallax-list"
                data-start="4"
                data-end=".3"
                style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.desktop_image.aspect_ratio | times: 100 }}%;"
              >
                {{
                  block.settings.desktop_image
                  | image_url: width: block.settings.desktop_image.width
                  | image_tag: loading: 'lazy', class: 'rounded-2'
                }}
              </div>
            {% endif %}
            {% if block.settings.mobile_image %}
              <div
                class="position-absolute ratio mobile_image2 d-block d-md-none as-parallax-list"
                data-start=".7"
                data-end=".3"
                style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.mobile_image.aspect_ratio | times: 100 }}%;"
              >
                {{
                  block.settings.mobile_image
                  | image_url: width: block.settings.mobile_image.width
                  | image_tag: loading: 'lazy', class: 'rounded-2'
                }}
              </div>
            {% endif %}
          {% when 'image3' %}
            {% if block.settings.desktop_image %}
              <div
                class="position-absolute ratio desktop_image3 d-none d-md-block as-parallax-list"
                data-start="2"
                data-end="1"
                style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.desktop_image.aspect_ratio | times: 100 }}%;"
              >
                {{
                  block.settings.desktop_image
                  | image_url: width: block.settings.desktop_image.width
                  | image_tag: loading: 'lazy', class: 'rounded-2'
                }}
              </div>
            {% endif %}
            {% if block.settings.mobile_image %}
              <div
                class="position-absolute ratio mobile_image3 d-block d-md-none as-parallax-list"
                data-start="1"
                data-end=".3"
                style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.mobile_image.aspect_ratio | times: 100 }}%;"
              >
                {{
                  block.settings.mobile_image
                  | image_url: width: block.settings.mobile_image.width
                  | image_tag: loading: 'lazy', class: 'rounded-2'
                }}
              </div>
            {% endif %}
          {% when 'image4' %}
            {% if block.settings.desktop_image %}
              <div
                class="position-absolute ratio desktop_image4 d-none d-md-block as-parallax-list"
                data-start="2"
                data-end="1.3"
                style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.desktop_image.aspect_ratio | times: 100 }}%;"
              >
                {{
                  block.settings.desktop_image
                  | image_url: width: block.settings.desktop_image.width
                  | image_tag: loading: 'lazy', class: 'rounded-2'
                }}
              </div>
            {% endif %}
            {% if block.settings.mobile_image %}
              <div
                class="position-absolute ratio mobile_image4 d-block d-md-none as-parallax-list"
                data-start="1"
                data-end=".6"
                style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.mobile_image.aspect_ratio | times: 100 }}%;"
              >
                {{
                  block.settings.mobile_image
                  | image_url: width: block.settings.mobile_image.width
                  | image_tag: loading: 'lazy', class: 'rounded-2'
                }}
              </div>
            {% endif %}
          {% when 'image5' %}
            {% if block.settings.desktop_image %}
              <div
                class="position-absolute ratio desktop_image5 d-none d-md-block as-parallax-list"
                data-start="3"
                data-end=".9"
                style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.desktop_image.aspect_ratio | times: 100 }}%;"
              >
                {{
                  block.settings.desktop_image
                  | image_url: width: block.settings.desktop_image.width
                  | image_tag: loading: 'lazy', class: 'rounded-2'
                }}
              </div>
            {% endif %}
            {% if block.settings.mobile_image %}
              <div
                class="position-absolute ratio mobile_image5 d-block d-md-none as-parallax-list"
                data-start="1"
                data-end=".4"
                style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.mobile_image.aspect_ratio | times: 100 }}%;"
              >
                {{
                  block.settings.mobile_image
                  | image_url: width: block.settings.mobile_image.width
                  | image_tag: loading: 'lazy', class: 'rounded-2'
                }}
              </div>
            {% endif %}
        {%- endcase -%} 
      {% endfor %}
      <div class="position-absolute title overflow-hidden">
        <h2 class="sec_heading mb-0 w-100">{{ section.settings.title }}</h2>
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Gallary",
  "tag": "section",
  "class": "as-brand-gallary-wrap",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Headline"
    },
    {
      "type": "header",
      "content": "Colors Settings"
    },
    {
      "type": "color",
      "id": "text_color_title",
      "label": "Text Title",
      "default": "#ffffff"
    }
  ],
  "blocks": [
    {
      "type": "image1",
      "name": "Image 1",
      "limit": 1,
      "settings": [
        {
          "type": "image_picker",
          "id": "desktop_image",
          "label": "Desktop image"
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile image"
        }
      ]
    },
    {
      "type": "image2",
      "name": "Image 2",
      "limit": 1,
      "settings": [
        {
          "type": "image_picker",
          "id": "desktop_image",
          "label": "Desktop image"
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile image"
        }
      ]
    },
    {
      "type": "image3",
      "name": "Image 3",
      "limit": 1,
      "settings": [
        {
          "type": "image_picker",
          "id": "desktop_image",
          "label": "Desktop image"
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile image"
        }
      ]
    },
    {
      "type": "image4",
      "name": "Image 4",
      "limit": 1,
      "settings": [
        {
          "type": "image_picker",
          "id": "desktop_image",
          "label": "Desktop image"
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile image"
        }
      ]
    },
    {
      "type": "image5",
      "name": "Image 5",
      "limit": 1,
      "settings": [
        {
          "type": "image_picker",
          "id": "desktop_image",
          "label": "Desktop image"
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile image"
        }
      ]
    }
  ]
}
{% endschema %}
